<template>
	<view class="container">
		<form @submit="submitForm" class="form">
			<!-- 个人信息 -->
			<view class="infoBox">
				<!-- 姓名 -->
				<view class="formItem1">
					<text>{{ app.language.name }}:</text>
					<view class="formB">
						{{form.name}}
					</view>
				</view>
				<!-- 公民身份证号 -->
				<view class="formItem1">
					<text>{{ app.language.card }}:</text>
					<view class="formB">
						{{form.card}}
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="formItem1">
					<text>{{ app.language.phone }}:</text>
					<view class="formB">
						{{form.phone}}
					</view>
				</view>
			</view>
			<!-- 入住旅客信息 -->
			<view class="infoBox1">
				<h2 class="title">{{app.language.ldy_visitorsInfo}}</h2>
				<view class="form" v-for="(item, index) in formData" :key="index">
					<image src="../../static/del.png" mode="" class="del" v-if="index>0" @click="handleDel(index)">
					</image>
					<!-- 来访人员姓名 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_visitorsName }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].visitorName"
								:placeholder="app.language.ldy_IvisitorsName" />
						</view>
					</view>
					<!-- 身份证号码 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_card }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].idcard" :placeholder="app.language.ldy_Icard" />
						</view>
					</view>
					<!-- 联系电话 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.phone }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].contactPhone"
								:placeholder="app.language.Iphone" />
						</view>
					</view>
					<!-- 来访房间号 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_visitorsId }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].visitRoomNumb"
								:placeholder="app.language.ldy_IvisitorsId" />
						</view>
					</view>
					<!-- 来访时间 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_visitorsReachTime }}:</text>
						<view class="formB">
							<picker mode="time" :value="formData[index].visitingTime" :start="startDate" :end="endDate"
								@change="bindVisitingChange(index,$event)">
								<view class="uni-input">{{formData[index].visitingTime}}</view>
							</picker>
						</view>
					</view>
					<!-- 离开时间 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_visitorsLeaveTime }}:</text>
						<view class="formB">
							<picker mode="time" :value="formData[index].leaveTime" :start="startDate" :end="endDate"
								@change="bindLeaveChange(index,$event)">
								<view class="uni-input">{{formData[index].leaveTime}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 新增 -->
				<view class="txry" @click="handleAdd">
					<view class="jia">
						<image src="../../static/jiahao.png" mode="" class="icon"></image>
						<text>{{ app.language.addText }}</text>
					</view>
				</view>
			</view>
			<button @click="submitForm" class="submit">{{ app.language.tijiao }}</button>
		</form>
	</view>
</template>

<script>
	import graceChecker from "../../components/graceChecker.js"
	import {
		GetHotelLf,
		GetHotelInfo
	} from '@/api/form.js'
	const global = getApp().globalData;
	export default {
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				form: {
					name: "",
					card: "",
					phone: "",
				},
				formData: [{
					visitorName: "",
					idcard: "",
					contactPhone: "",
					visitRoomNumb: "",
					visitingTime: "",
					leaveTime: ""
				}],
				token: "",
				userInfo: {},
				hffuuid: "",
				policeStation: ""
			}
		},
		onLoad(options) {
			this.hffuuid = options.hffuuid
			this.formData[0].visitingTime = this.app.language.qxz
			this.formData[0].leaveTime = this.app.language.qxz
			this.getToken()
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						console.log('resres', res)
						that.token = res.data.userInfo.appToken
						that.userInfo = res.data.userInfo
						that.form.phone = res.data.userInfo.phonenumber
						that.form.name = res.data.userInfo.userName
						that.form.card = res.data.userInfo.idcard
						// 获取数据信息
						uni.showLoading({
							title: that.app.language.jzz,
						});
						let data = {
							appToken: res.data.userInfo.appToken,
						}
						// 获取旅店业基本信息
						GetHotelInfo(data).then((res) => {
							if (res.code == 200) {
								uni.hideLoading();
								if (res.data.hotelBaseList && res.data.hotelBaseList.length > 0) {
									that.policeStation = res.data.hotelBaseList[0].policeStation
								}
							}
						})
					}
				});
			},

			//  form表单+1
			handleAdd() {
				let prem = {
					visitorName: "",
					idcard: "",
					contactPhone: "",
					visitRoomNumb: "",
					visitingTime: this.app.language.qxz,
					leaveTime: this.app.language.qxz
				}
				this.formData.push(prem); // 添加一个新的空表单项
			},

			// form表单-1
			handleDel(index) {
				let that = this
				// uni.showModal({
				// 	// title: '提示',
				// 	content: '确定要删除吗?',
				// 	success: function(res) {
				// 		if (res.confirm) {

				// 			// 用户点击了确定按钮的相关逻辑可以放在这里
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 			// 用户点击了取消按钮的相关逻辑可以放在这里
				// 		}
				// 	}
				// });
				that.formData.splice(index, 1); // 移除指定索引的表单项
			},

			// 来访时间
			bindVisitingChange: function(index, e) {
				this.formData[index].visitingTime = e.detail.value
			},

			// 离开时间
			bindLeaveChange: function(index, e) {
				this.formData[index].leaveTime = e.detail.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			submitForm() {
				for (let i = 0; i < this.formData.length; i++) {
					this.formData[i].appToken = this.token;
					this.formData[i].hffuuid = this.hffuuid;
					this.formData[i].policeStation = this.policeStation;
					// this.formData[i].phone = this.form.phone;
					// 来访人员姓名
					if (!this.formData[i].visitorName) {
						uni.showToast({
							title: this.app.language.ldy_IvisitorsName,
							icon: 'none',
						});
						return
					}
					// 来访人员身份证号
					if (!this.formData[i].idcard) {
						uni.showToast({
							title: this.app.language.ldy_Icard,
							icon: 'none',
						});
						return
					}
					// 来访人员电话号码
					if (!this.formData[i].contactPhone) {
						uni.showToast({
							title: this.app.language.Iphone,
							icon: 'none',
						});
						return
					}
					// 来访人员房间号
					if (!this.formData[i].visitRoomNumb) {
						uni.showToast({
							title: this.app.language.ldy_IvisitorsId,
							icon: 'none',
						});
						return
					}
					// 来访时间
					if (!this.formData[i].visitingTime || this.formData[i].visitingTime === this.app.language.qxz) {
						uni.showToast({
							title: this.app.language.ldy_IvisitorsReachTime,
							icon: 'none',
						});
						return
					}
					// 离开时间
					if (!this.formData[i].leaveTime || this.formData[i].leaveTime === this.app.language.qxz) {
						uni.showToast({
							title: this.app.language.ldy_IvisitorsLeaveTime,
							icon: 'none',
						});
						return
					}
				}
				console.log('提交的数据formData:', this.formData);
				uni.showLoading({
					title: this.app.language.jzz,
				});
				// 这里可以添加提交表单的逻辑
				GetHotelLf(this.formData).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: this.app.language.qddsh,
							icon: 'success',
						});
						setTimeout(() => {
							console.log('跳转首页')
							uni.reLaunch({
								url: '/pages/hotel/listText'
							});
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.form {
		width: 100%;
		padding-bottom: 20rpx;
		position: relative;
	}

	.formItem {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.infoBox {
		border: 1px solid #ddd;
		box-shadow: 1px 1px 10rpx #ddd;
		margin-bottom: 15rpx;
		padding: 15rpx;
	}

	.infoBox1 {
		box-shadow: 1px 1px 10rpx #ddd;
		padding: 10rpx;
	}

	.infoBox1 .form {
		border: 1px solid #ddd;
		margin-top: 25rpx;
	}

	.formItem1 {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd;
	}

	.formB {
		/* background-color: #f3f3f3; */
		font-size: 24rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		position: absolute;
		right: 10rpx;
		top: -2rpx;
		color: #808080;
		text-align: right;
	}

	.formItem text,
	.formItem1 text {
		font-size: 26rpx;
	}

	.hjbImg button {
		font-size: 22rpx;
		width: 149rpx;
		height: 56rpx;
		background: #2f8ef9;
		color: #fff;
	}

	.hjbImg {
		/* position: absolute;
		bottom: 10rpx; */
		width: 150rpx;
		margin-top: 20rpx;
	}

	.scimage {
		width: 142rpx;
		height: 80rpx;
		position: absolute;
		bottom: 4rpx;
		left: 200rpx;
	}

	.title {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.submit {
		background-color: #2f8ef9;
		color: #fff;
		font-size: 28rpx;
		width: 95%;
		margin: 20rpx auto 0;
	}

	.picker {
		padding: 10px;
		text-align: center;
		margin-top: -25rpx;
	}

	.bt {
		color: red;
		margin-right: 5rpx;
	}

	.jia {
		border: 1px dashed #2f8ef9;
		text-align: center;
		color: #2f8ef9;
		margin: 20rpx auto 0;
		font-size: 26rpx;
		border-radius: 10rpx;
		padding: 0 0 13rpx;
	}

	.jia image {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
	}

	.del {
		width: 25px;
		height: 25px;
		position: absolute;
		right: -5px;
		top: -8px;
		z-index: 9999;
	}

	.polSta {
		font-size: 26rpx;
		font-weight: 500;
		/* text-align: right; */
		color: #2f8ef9;
		margin-top: 15rpx;
	}

	.uni-input {
		width: 242rpx;
		color: #808080;
		padding: 10px;
		margin-top: -25rpx;
	}
</style>